哈姆雷特之 React

最近两三周在主要在写 React，在这里写一下，算是个总结。

webpack

我们的后端语言用的是 Go, 对于写网站来说，Go 并没有好的前端资源（js, css，image）的管理方式(打包，压缩)，另外我们也没有用任务的框架，简单粗暴的 Go http server + package 的方式来实现的，所以也只能借用 JS 的. 开始的时候其实我们用的是 gulp, 因为只需要打包、压缩生成 manifest 就可以了，它的使用也简单(也是当时对 webpack 的理解不够)。但是打算换成 ReactJS，它是推荐用 browserify 或 webpack，就这样决定把之前的 gulp 换成了 webpack。这里面主要的问题是作用域。这里强烈建议看一下 ryfeng 的一篇文章Resource2，关于 CommonJS 的，因为 webpack 也是基于它的，理解很重要。关于 AMD 的因为没有实践，就不多说了。总之也并没有那么难。

Component 生命周期

略，其实很重要，主要是因为资料说得很详细，这里只把地址放在这里，生命周期

JSX

React 里非常重要的一部分是 JSX，虽然你可以用 JS 来代替，我相信大多数人不会这样做。所以很有必要说一下。

我经常遇到的一个错误 Adjacent JSX elements must be wrapped in an enclosing tag，原因是 React.createClass 里的 render 里面只能返回闭合的标签。像 img， br 这种闭合还是可以理解的，但是我会忘记最外层加一个闭合的标签，为什么？根源就在于 JSX。我把Resource3里的例子放到这里。

var dropdown =
  <Dropdown>
    A dropdown list
    <Menu>
      <MenuItem>Do Something</MenuItem>
      <MenuItem>Do Something Fun!</MenuItem>
      <MenuItem>Do Something Else</MenuItem>
    </Menu>
  </Dropdown>;

render(dropdown);

这是我刚开始的 ReactJS 的写法:

var Layout = React.createClass({
  render: function() {
    return (
      <Header />
      <Content />
      <Footer />
    );
  }
});

上面的这个例子 Header, Content, Footer 最外层，实际上是没有闭合的。render 里面返回的是一个变量，而上面我的例子，会产生歧义，它并不知道到里里结束。

另外包含了一些其它的，类似于编译器、 Transpilers（没有想到好的词来表达）。

翻页

并不是太习惯于滚动翻页，我选择了 react-pager，其实也很方便，只是需要在 handlePageChanged 自己处理数据请求。只是会有一个跟 react-router 结合时 browserHistory 的问题，我们接下来说。

路由

React 做为 SAP 是一个很好的选择，但是我希望能够像正常的 URL 请求一样，所以我又用了 react-router。实际上 Routes 是分成两部分的：Client 跟 Server，如果你用 NodeJS 的很方便。但是我们是用的 Go，Server 端只能自己来写，不过最终方法是抽取出来了，也还好。

client 我遇到的几个方面:

• 多个 components共用 layout，resource8

• 上面提到的 browserHistory 问题，加 pagination 时 browserHistory 的处理。这里需要很看一下 Resource7，理解一下 component 的生命周期，我是 componentDidUpdate 里处理，整个代码是需要自己来实现的。另外需要在 handlePageChanged 时把翻页放入历史里面 browserHistory.push('/users?page='+newPage)

最后

以上是我在使用过程中，遇到的困难跟觉得比较重要的部分。目前看来 ReactJS 确实是非常适合于前后端分离的。把数据的渲染工作放到前端，用 api 的加载数据而不是整个页面可以提升大约 50% 速度（这个是基于数据量的，测试数据大概百万级别）。首次请求因为没有数据的处理跟模板的加载，显示速度提升更明显，相当于静态的 html 加载，本地测试数据是提升几百倍，从大于1s到几ms。

如果问题欢迎一起讨论。

相关资料

https://facebook.github.io/react/
[Resource2] http://javascript.ruanyifeng.com/nodejs/module.html
[Resource3]https://facebook.github.io/jsx/
https://www.npmjs.com/package/react-pager
https://github.com/reactjs/react-router
https://github.com/reactjs/react-router/tree/master/docs
[Resource7]https://github.com/reactjs/react-router/blob/master/docs/guides/ComponentLifecycle.md
[Resource8]https://github.com/reactjs/react-router/blob/master/docs/API.md#components-1